<template>
  <div class="main-box">
    <div class="main-box-top">
       <div class="main-box-top-left">
         <img  style="margin-left: 20px" src="../../assets/map-icon.png"/>
       </div>
      <div class="main-box-top-right">
        <div class="main-box-top-right-up">Map示例</div>
        <div class="main-box-top-right-down">（基于Openlayer@10.3.1）</div>
      </div>
      <div class="main-box-top-icon">
        <img title="返回首页" @click="rebackMain"  style="width: 24px;height: 24px;margin-right: 20px;" src="../../assets/img/top-img/reback.png" />
      </div>
    </div>
    <div class="main-box-inner">
      <div class="main-box-innerleft">
        <div class="main-box-innerleft-menutitle">菜单</div>
        <div class="main-box-innerleft-menu">
          <el-menu
              active-text-color="#ffd04b"
              background-color="#3C8DBC"
              text-color="#fff"
              :default-active="'/createOpenMap'"
              :router="true"
          >
            <el-sub-menu v-for="(item) in menuList" :index="item.code" :key="item.code" >
              <template #title>
                <el-icon><location /></el-icon>
                <span>{{item.name}}</span>
              </template>
              <template v-for="(sitem) in item['children']">
                <el-sub-menu   v-if="sitem['children']"   :index="sitem.code">
                  <template #title>{{sitem.name}}</template>
                  <el-menu-item   v-for="ssitem in sitem['children']"  :key="ssitem.code"  :index="ssitem.code">{{ssitem.name}}</el-menu-item>
                </el-sub-menu>
                <el-menu-item  v-else    :index="sitem.code"   :key="sitem.code" >{{sitem.name}}</el-menu-item>
              </template>
            </el-sub-menu>
          </el-menu>
        </div>
      </div>
      <router-view></router-view>
      <!--<canvas class="tree_canvas"></canvas>-->
    </div>
  </div>


</template>

<script lang="ts" setup>
import {ref, onMounted,reactive} from "vue";
import {useRouter} from "vue-router";
const router= useRouter();
const currentChooseType=ref("");
const menuList = reactive([
  {
    "name": "Openlayer10.3.1",
    "code": "Openlayer10.3.1",
    "children": [
      {"name":"★地图初始化","code":"/createOpenMap"},
      {"name":"★路径规划","code":"/pathRoamOpen"},
      {"name":"★经纬网格","code":"/latlonGrids"}
    ]
  }
])

const rebackMain=()=>{
  router.push('/fistPage')
}
onMounted(()=>{
  router.push('/createOpenMap')
})
</script>

<style  lang="scss"  scoped>
 .main-box{
   width: 100%;
   height: 100%;
   .tree_canvas {
     position: absolute;
     right: 10px;
     bottom: 10px;
     height: 300px;
     width: 300px;
     background-color: lightgoldenrodyellow;
   }
   &-top{
     height: 72px;
     width: 100%;
     background-color:  #2c3e50;
     color: #ffffff;

     display: flex;
     align-items: center;
     &-left{
       width:80px;
       display: flex;
       justify-content: left;
     }
     &-right{
       width:calc(100% - 100px);
       display: flex;
       justify-content: center;
       flex-direction: column;
       &-up{
         font-size: 25px;
       }
       &-down{
         font-size: 12px;
       }
     }
     &-icon{
       display: flex;
       img{
        margin-left: 10px;
         width: 28px;
         height: 28px;
         margin-right: 10px;
         cursor: pointer;
       }
     }
   }
   &-inner{
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: calc(100% - 72px);
   }

   &-innerleft{
     margin-top: 5px;
     margin-left: 5px;
     background-color:  #2c3e50;
     width: 200px;
     height:calc(100% - 80px);
     position: fixed;
     left: 0px;
     top: 72px;
     z-index: 10;
     &-menutitle{
       height: 20px;
       background-color: #2c3e50;
       color: #ffffff;
       text-align: center;
     }
     &-menu{
       height: calc(100% - 20px);
       overflow-x: hidden;
       overflow-y: auto;
       :deep(.el-menu) {
          border-right: unset !important;
         background-color: #2c3e50;
       }
       :deep(.el-sub-menu__title){
         background-color: #2c3e50 !important;
       }
     }
   }

   .position-fixed-box{
     position: fixed;
     left: 10px;
     top: 10px;
     width: calc(100% - 20px);
     height: calc(100% - 20px);
     border-radius: 10px;
     border: 2px solid #759dc0;
   }
   :deep(.v-md-editor__preview-wrapper){
     display: none;
   }
   :deep(.v-md-textarea-editor textarea){
     padding: 0px 20px !important;
   }
   :deep(.v-md-editor__toolbar-left){
     display: none;
   }
   :deep(.v-md-editor__toolbar-item-preview){
     display: none;
   }
   :deep(.v-md-editor__toolbar-item-toc){
     display: none;
   }
   :deep(.v-md-editor__toolbar-item-sync-scroll){
     display: none;
   }
   :deep(.v-md-editor__toolbar){
    justify-content: flex-end;
   }
 }
</style>
